<template>
  <div v-loading="loading" class="gl_contentBox gl_heightFull">
    <el-row :gutter="20" class="gl_pb_10">
      <el-col :span="24">
        当前选定单位：
        <span>{{ $route.query.disname ? $route.query.disname + '-' : '' }}</span>
        <span>{{ $route.query.currentTreeData ? $route.query.currentTreeData : '' }}</span>
      </el-col>
    </el-row>
    <div class="top_title">运营数据</div>
    <div class="content">
      <template v-for="(item, index) in detailsList">
        <div v-if="item.show" :key="index" class="box gl_mb_15" :style="{ backgroundImage: 'url(' + item.bgImg + ')' }">
          <p class="gl_mb_5 gl_fs_14">{{ item.name }}</p>
          <p v-if="item.code === 'income' || item.code === 'outcome' || item.code === 'amount'" :style="{ color: item.color }">{{ formatMoney(tableData[item.code]) }}</p>
          <p v-else :style="{ color: item.color }">{{ tableData[item.code] }}</p>
        </div>
      </template>
      <div class="detail"><el-button type="text" class="btn" @click="toDetail">详细>></el-button></div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { api_GET_ClubTAManagementStatistic, api_GET_ClubTAManagementAmountStatistic } from '@/extend/api/hallswaggerApi/app.js';
import { TAStatisticDto } from '@/lib/form/hall/swaggerForm';

export default {
  name: 'DataManage',
  data() {
    return {
      loading: false,
      tableData: new TAStatisticDto(),
      detailsList: [
        {
          show: false,
          code: 'delegationsCount',
          name: '累计注册机构（无锡中心）',
          sum: 0,
          color: '#c10000',
          bgImg: require('@/assets/images/mall/statistics_bg_1.png')
        },
        {
          show: false,
          code: 'registersCount',
          name: '累计注册用户（无锡中心）',
          sum: 0.00,
          color: '#cd7d00',
          bgImg: require('@/assets/images/mall/statistics_bg_2.png')
        },
        {
          show: true,
          code: 'competitionsCount',
          name: '累计赛事总数（场）',
          sum: 0,
          color: '#71bd00',
          bgImg: require('@/assets/images/mall/statistics_bg_3.png')
        },
        {
          show: true,
          code: 'trainingsCount',
          name: '累计培训总数（场）',
          sum: 0,
          color: '#06b5b5',
          bgImg: require('@/assets/images/mall/statistics_bg_4.png')
        },
        {
          show: true,
          code: 'outcome',
          name: '累计支出金额（元）',
          sum: 0,
          color: '#21009c',
          bgImg: require('@/assets/images/mall/statistics_bg_5.png')
        },
        {
          show: true,
          code: 'income',
          name: '累计收入金额（元）',
          sum: 0,
          color: '#0085a8',
          bgImg: require('@/assets/images/mall/statistics_bg_6.png')
        },
        {
          show: true,
          code: 'amount',
          name: '累计平台总流水',
          sum: 0,
          color: '#c10000',
          bgImg: require('@/assets/images/mall/statistics_bg_1.png')
        }
      ]
    };
  },
  computed: {
    ...mapState({
      typeCode: state => state.user.info.currentOrganizationUnit.typeCode
    })
  },
  created() {
    if (this.typeCode && this.typeCode === 'WXCenter') {
      if (this.detailsList) {
        this.detailsList[0].show = true;
        this.detailsList[1].show = true;
      }
    }
    if (this.$route.query.Club === 'WXCenter') {
      this.detailsList[6].name = '累计平台总流水';
    } else {
      this.detailsList[6].name = '累计平台流水';
    }
    this.getData();
    this.getAmount();
  },
  methods: {
    // 获取协会数据汇总
    getData() {
      this.loading = true;
      console.log(this.$route.query.organizationUnitId);
      api_GET_ClubTAManagementStatistic({ OrganizationUnitId: this.$route.query.organizationUnitId }).then(res => {
        this.loading = false;
        if (res) {
          this.tableData.registersCount = res.registersCount;
          this.tableData.delegationsCount = res.delegationsCount;
          this.tableData.competitionsCount = res.competitionsCount;
          this.tableData.trainingsCount = res.trainingsCount;
        }
        console.log(this.tableData);
      }, (error) => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取流水
    getAmount() {
      api_GET_ClubTAManagementAmountStatistic({ OrganizationUnitId: this.$route.query.organizationUnitId }).then(res => {
        if (res) {
          this.tableData.income = res.incomeAmount;
          this.tableData.outcome = res.expenditureAmount;
          this.tableData.amount = res.amount;
        }
        console.log(res);
      }, (error) => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    toDetail() {
      this.$router.push({ name: 'DataDetails', query: { organizationUnitId: this.$route.query.organizationUnitId, disname: this.$route.query.disname ? this.$route.query.disname : '', currentTreeData: this.$route.query.currentTreeData ? this.$route.query.currentTreeData : '' }});
    },
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.noPadding {
  padding: 0px;
}
.top_title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #E8E8E8;
  font-size: 16px;
  font-weight: bold;
  padding-left: 25px;
}
.content {
  padding: 15px 15px 15px 30px;
  display: flex;
  justify-content: left;
  align-items: center;
  flex-wrap: wrap;
  .box {
    width: 260px;
    height: 114px;
    padding: 20px 26px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
    color: #8C8A8A;
    font-size: 30px;
    display: inline-block;
    margin-right: 50px;
    // cursor: pointer;
    transition: all .4s ease 0s;
  }
  .box:last-child {
    margin-right: 0px;
  }
  .detail {
    display: inline-block;
    width: 80px;
    height: 114px;
    margin: 0px;
    position: relative;
    .btn {
      position: absolute;
      left: 0px;
      bottom: 0px;
    }
  }
}
</style>
